<template>
    <view class="box">
        <view style="display: flex;">
            <view style="margin-left: auto;">
                <u-tag :text="gTN(type)" type="primary"></u-tag>
                <u-tag :text="'分值：'+point" type="success"></u-tag>
            </view>
        </view>
        <template v-if="type===1">
            <view class="question">
                <view class="title">
                    {{no+"."+question}}
                </view>
                <view :class="'option-color'+(initAnswer[0]===option.id?' active':'')" @click="optionClick(option.id)"
                    v-for="option in options">
                    {{
                  option.content
                }}
                </view>
            </view>
        </template>
        <template v-if="type===2">
            <view class="question">
                <view class="title">
                    {{no+"."+question}}
                </view>
                <view :class="'option-color'+(initAnswer.find(d=>d===option.id)?' active':'')"
                    @click="optionsClick(option.id)" v-for="option in options">
                    {{
                    option.content
                }}
                </view>
            </view>
        </template>
        <template v-if="type===3">
            <view class="question">
                <view class="title">
                    {{no+"."+question}}
                </view>
                <view :class="'option-color'+(initAnswer[0]===option?' active':'')" @click="optionClick(option)"
                    v-for="option in [1,0]">
                    {{
                  option===1?"正确":"错误"
                }}
                </view>
            </view>
        </template>
        <template v-if="type===4">
            <view class="question">
                <view class="title">
                    {{no+"."+getQuestion(question)}}
                </view>
                <view class="input" v-for="(o,i) in options">
                    <u-input :border="true" :value="initAnswer[i]" @input="(v)=>handleInput(v,i)"
                        :custom-style="{backgroundColor:'antiquewhite',height:'1.5rem',padding:'0.25rem'}"></u-input>
                </view>
            </view>
        </template>
        <template v-if="type===5">
            <view class="question">
                <view class="title">
                    {{no+"."+question}}
                </view>
                <view>
                    <u-input :border="true" border-color="black" type="textarea" :auto-height="true"
                        :value="initAnswer[0]" @input="(e)=>{
                        $emit('answerChange',[e]); }"></u-input>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
    import {
        getTypeName
    } from '../../api/name';
    export default {
        props: {
            disabled: {
                type: Boolean,
                default: false,
            },
            point: {
                type: Number,
                default: 0,
            },
            type: {
                type: Number,
                default: 1,
            },
            question: {
                type: String,
                default: "",
            },
            options: {
                type: Array,
                default: []
            },
            no: {
                type: Number,
                default: 1,
            },
            initAnswer: {
                type: Array,
                default: []
            }
        },
        created() {

        },
        methods: {
            gTN(type) {
                return getTypeName(type);
            },
            handleInput(value, i) {
                // 你可以在这里处理输入的值
                console.log(value, this.initAnswer);
                var res = [...this.initAnswer];
                if (this.initAnswer[i]) {
                    res[i] = value;
                } else {
                    res.length = i + 1;
                    res[i] = value;
                }
                this.$emit("answerChange", res);
            },
            fillAVacancy(index, value) {
                const res = [...this.initAnswer];
                res[index] = value;
                this.$emit("answerChange", res);
            },
            getQuestion(question) {
                console.log(question);
                const questions = question.split("{0}");
                const res = new Array(questions.length * 2 - 1);
                console.log(res);
                for (let i = 0; i < questions.length - 1; i++) {
                    res[2 * i] = questions[i];
                    if (i + 1 <= this.options.length) {
                        res[2 * i + 1] = "_____";
                    }
                }
                console.log(res);
                return res.join("");
            },
            optionClick(id) {
                this.$emit("answerChange", [id]);
            },
            optionsClick(id) {
                var i = this.initAnswer.findIndex(d => d === id);
                var res;
                if (i != -1) {
                    res = this.initAnswer.filter(d => d !== id);
                } else {
                    res = [...this.initAnswer, id];
                }
                this.$emit("answerChange", res);
            }
        },
        data() {
            return {
                i: 0
            }
        }
    }
</script>

<style>
    .box {
        height: 100%;
    }

    .question {
        font-size: 0.8rem;
        margin: 1rem;
    }

    .input {
        margin: 0.5rem 0;
        font-size: 1rem;
    }

    .option {
        padding: 1rem;
        margin: 0.5rem 0;
        font-size: 1rem;
    }

    .option-color {
        padding: 1rem;
        margin: 0.5rem 0;
        font-size: 1rem;
        background-color: antiquewhite;
    }

    .active {
        background-color: springgreen;
    }
</style>